<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tab选项卡——初始化函数和注册JQ方法</title>
    <link rel="stylesheet" href="css/index6-1.css" />
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/index6-1.js"></script>
  </head>
  <body>
    <div class="box1">
      <h3>1、没有配置任何参数</h3>
      <div class="js-tab tab" data-config='{
    			"triggerType":"mouseover",
    			"effect":"fade",
    			"invoke":1,
    			"auto":3000
        }'>
        <ul class="tab-nav">
          <li class="active">
            <a href="javascript:void(0)">新闻</a>
          </li>
          <li>
            <a href="#">娱乐</a>
          </li>
          <li>
            <a href="#">电影</a>
          </li>
          <li>
            <a href="#">科技</a>
          </li>
        </ul>
        <div class="content-wrap">
          <div class="content-item current">
            <img src="img/a.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/b.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/c.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/d.jpg" />
          </div>
        </div>
      </div>
    </div>

    <div class="box2">
      <h3>2、触发click事件，切换效果为淡入淡出，3秒自动切换</h3>
      <div class="js-tab tab" data-config='{
    			"triggerType":"click",
    			"effect":"fade",
    			"invoke":1,
    			"auto":3000
        }'>
        <ul class="tab-nav">
          <li class="active">
            <a href="javascript:void(0)">新闻</a>
          </li>
          <li>
            <a href="#">娱乐</a>
          </li>
          <li>
            <a href="#">电影</a>
          </li>
          <li>
            <a href="#">科技</a>
          </li>
        </ul>
        <div class="content-wrap">
          <div class="content-item current">
            <img src="img/a.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/b.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/c.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/d.jpg" />
          </div>
        </div>
      </div>
    </div>

    <div class="box3">
      <h3>3、默认显示哪一个tab内容</h3>
      <div class="js-tab tab" data-config='{
    			"triggerType":"mouseover",
    			"effect":"fade",
    			"invoke":3,
    			"auto":false
        }'>
        <ul class="tab-nav">
          <li class="active">
            <a href="javascript:void(0)">新闻</a>
          </li>
          <li>
            <a href="#">娱乐</a>
          </li>
          <li>
            <a href="#">电影</a>
          </li>
          <li>
            <a href="#">科技</a>
          </li>
        </ul>
        <div class="content-wrap">
          <div class="content-item current">
            <img src="img/a.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/b.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/c.JPEG" />
          </div>
          <div class="content-item">
            <img src="img/d.jpg" />
          </div>
        </div>
      </div>
    </div>

    <script>
      $(function () {
        //第一种调用方式
        //var tab1 = new Tab($(".js-tab").eq(0));
        //var tab2 = new Tab($(".js-tab").eq(1));
        //var tab3 = new Tab($(".js-tab").eq(2));

        //第二种调用方式
        Tab.init($(".js-tab"));

        //第三种调用方式
        //$(".js-tab").tab().css("backgroundColor","red");
      });
    </script>
  </body>
</html>